<template>
    <div>
        <div class="header">
            <a-button type="primary" @click="add_btn"> 添加</a-button>
        </div>
        <a-table :dataSource="roleList" :columns="columns" />




        <!-- 添加弹框 -->
        <a-modal ref="modalRef" v-model:visible="add_visible" :wrap-style="{ overflow: 'hidden' }">

            <a-form :layout="'vertical'" :model="formState" name="basic" :label-col="{ span: 8 }"
                :wrapper-col="{ span: 24 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">

                <a-form-item label="姓名" name="realname" :rules="[{ required: true, message: '请输入姓名' }]">
                    <a-input v-model:value="formState.realname" />
                </a-form-item>
 
                <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                    <a-button type="primary" html-type="submit">添加</a-button>
                </a-form-item>
            </a-form>


            <template #footer> </template>
            <template #title>
                <div ref="modalTitleRef" style="width: 100%; cursor: move">添加菜单</div>
            </template>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'   // cnpm i pinia --save  2.1.3  
import { onMounted, ref,reactive} from 'vue'
const store = useCounterStore()
const { roleList } = storeToRefs(store)  //  数据 
const { get_role_list } = store    //方法

onMounted(async () => {
    if (roleList.value.length == 0) {
        await get_role_list()
    }
    console.log(roleList.value);
})
const columns = ref([{
    title: "姓名",
    dataIndex: 'role_name',
}, {
    title: "创建时间",
    dataIndex: 'create_time',
}, {
    title: "操作",
    dataIndex: 'operation',
}])

interface FormState {
    username: string | number,
 
}
// 表单
const formState = reactive<FormState>({
    username: "",
 
});
const add_visible = ref(false)
// 添加
const add_btn = async () => {
    add_visible.value = true
}

// 添加
const onFinish = async (values: any) => {
    console.log('Success:', values);
    console.log(formState);

};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};

</script>

<style scoped lang="scss">
.header {
    padding-bottom: 15px;
}
</style>